import React from 'react';
import { Search, Tag, Balloon } from '@teamix/ui';
import Pagination from 'components/commonPagination';
import { YunxiaoTable, ButtonIcon } from '@alife/devops-ui';
import exceed from 'utils/apimap';
import debounce from 'lodash.debounce';
import ListEmpty from 'atComponents/ListEmpty';
import intl from '../../../../../../../../../../locale';

const { id: org_id } = window.FORCE.organization;
const { Tooltip } = Balloon;

export default class Users extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      order_by: 'issue_num',
      sort: 'desc',
      page: 1,
      search: '',
      isLoading: true,
      showSearch: false,
    };

    this.onSearch = debounce(this.onSearch, 500);
  }

  componentDidMount() {
    this.getInfoReportUsers(1);
  }

  // 敏感信息报表-查询用户分页列表
  getInfoReportUsers(page) {
    const { search, order_by, sort } = this.state;
    this.setState({
      isLoading: true,
    });

    exceed
      .forceFetch({
        api: 'organization.sensitive.info_report.user_list',
        params: {
          org_id,
        },

        data: {
          per_page: 10,
          search,
          page,
          order_by,
          sort,
        },
      })
      .then((result) => {
        const { list } = result;
        const total = result.amount || 0;
        this.setState({
          infoReportUsers: list,
          isLoading: false,
          total,
          page,
        });
      });
  }

  onPageNoChange = (page) => {
    this.getInfoReportUsers(page, this.state.search, this.state.order_by, this.state.sort);
  };

  onSearch = (value) => {
    this.setState({ search: value }, () => {
      this.getInfoReportUsers(1);
    });
  };

  onSort = (dataIndex, order) => {
    this.setState(
      {
        sort: order,
        order_by: dataIndex,
      },

      () => {
        this.getInfoReportUsers(1);
      },
    );
  };

  render() {
    const { infoReportUsers, isLoading, total, page, showSearch, search } = this.state;
    return (
      <div className="risk-section">
        <div className="risk-section-header">
          <div style={{ color: '#8c8c8c' }}>
            {intl.get({
              id: 'code-assets.containers.sensitiveInfoReport.users.RankingOfUserIssues',
              defaultMessage: '用户问题排行',
            })}
          </div>
          <div className="risk-section-header-right">
            {showSearch ? (
              <Search
                className="risk-section-header-search"
                shape="simple"
                defaultValue={this.state.search}
                placeholder={intl.get({
                  id: 'code-assets.containers.sensitiveInfoReport.users.SearchForUsers',
                  defaultMessage: '搜索用户',
                })}
                onChange={(value) => {
                  this.onSearch(value);
                }}
                onBlur={() => {
                  this.setState({ showSearch: false });
                }}
                autoFocus
              />
            ) : (
              <ButtonIcon
                name="search-line"
                onClick={() => {
                  this.setState({ showSearch: true });
                }}
              />
            )}
          </div>
        </div>
        <YunxiaoTable
          className={'users-table'}
          hasBorder
          dataSource={infoReportUsers}
          loading={isLoading}
          onSort={this.onSort}
          emptyContent={
            <ListEmpty
              content={
                search
                  ? null
                  : intl.get({
                      id: 'code-assets.containers.sensitiveInfoReport.users.NoData',
                      defaultMessage: '暂无数据',
                    })
              }
              desc={
                search
                  ? intl.get({
                      id: 'code-assets.containers.sensitiveInfoReport.users.NoSearchResultsAreFound',
                      defaultMessage: '暂无搜索结果',
                    })
                  : null
              }
              imgType="search"
              className="table-list-empty"
            />
          }
        >
          <YunxiaoTable.Column
            title={intl.get({
              id: 'code-assets.containers.sensitiveInfoReport.users.UserName',
              defaultMessage: '用户名',
            })}
            dataIndex="user_name"
            cell={(value, index, record) => {
              return (
                <div className="user-col-content">
                  <Tooltip
                    trigger={<div className="table-cell-one-line">{value}</div>}
                    align="t"
                    popupContainer={(trigger) => trigger.parentNode}
                  >
                    {value}
                  </Tooltip>{' '}
                  {record.user_state === 0 ? (
                    <Tooltip
                      trigger={
                        <div>
                          <Tag size="small">
                            {intl.get({
                              id: 'code-assets.containers.sensitiveInfoReport.users.NotMatched',
                              defaultMessage: '未匹配',
                            })}
                          </Tag>
                        </div>
                      }
                      popupContainer={(trigger) => trigger.parentNode}
                      align="t"
                      text={
                        value ===
                        intl.get({
                          id: 'code-assets.containers.sensitiveInfoReport.users.Unknown',
                          defaultMessage: '未知',
                        })
                          ? intl.get({
                              id: 'code-assets.containers.sensitiveInfoReport.users.HistoricalDataOrNoEmail',
                              defaultMessage: '历史数据或无邮箱信息',
                            })
                          : intl.get({
                              id: 'code-assets.containers.sensitiveInfoReport.users.NotMatchingEnterpriseMembers',
                              defaultMessage: '未匹配企业成员',
                            })
                      }
                    />
                  ) : null}
                </div>
              );
            }}
            className="user-col"
            width={300}
          />

          <YunxiaoTable.Column
            title="Blocker"
            dataIndex="blocker_num"
            width={140}
            sortable
            initialOrder="asc"
          />

          <YunxiaoTable.Column title="Critical" dataIndex="critica_num" width={140} />
          <YunxiaoTable.Column title="Major" dataIndex="major_num" width={140} />
          <YunxiaoTable.Column
            title={intl.get({
              id: 'code-assets.containers.sensitiveInfoReport.users.TotalNumberOfQuestions',
              defaultMessage: '问题总数',
            })}
            dataIndex="issue_num"
            width={140}
            sortable
            initialOrder="asc"
          />
        </YunxiaoTable>
        <Pagination
          onChange={this.onPageNoChange}
          current={page}
          total={total}
          showJump={false}
          hideOnlyOnePage
        />
      </div>
    );
  }
}
